<template>
	<!--键盘-->
	<view style="display: flex;flex-direction: row;">
		<!-- <view style="width: 50px;">
		</view> -->
		<view style="flex: 1;">
			<view class="keyboard" catchtap="stopProp" v-if="letterBoxHeight !== 0">
				<block v-for="(itemNameG, idxG) in keyboardAlph" :key="idxG">
					<block v-for="(itemName, idx) in itemNameG" :key="idx">
						<view v-if="idxG==1 && idx==0" :class="itemName == currentKey ? 'board_bg' : ''"
							class="td td_num td_big_left"
							:style="{width:letterBoxWidth+'px',height:letterBoxHeight+'px'}" hover-class="board_bg"
							@click="tapKeyboard" :data-index="idx" :data-val="itemName">
							{{itemName}}
						</view>
						<view v-else-if="idxG==1 && idx==8" :class="itemName == currentKey ? 'board_bg' : ''"
							class="td td_num td_big_right"
							:style="{width:letterBoxWidth+'px',height:letterBoxHeight+'px'}" hover-class="board_bg"
							@click="tapKeyboard" :data-index="idx" :data-val="itemName">
							{{itemName}}
						</view>
						<view v-else class="td td_num" :style="{width:letterBoxWidth+'px',height:letterBoxHeight+'px'}"
							hover-class="board_bg" :class="itemName == currentKey ? 'board_bg' : ''"
							@click="tapKeyboard" :data-index="idx" :data-val="itemName">
							{{itemName}}
						</view>
					</block>
				</block>
			</view>
		</view>
		<!-- <view style="width: 50px;">
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			currentKey: {
				type: String,
				// observer: function() {
				// 	this.tapKeyboardStr();
				// }
			},
			// keyboardValue: {
			// 	type: String,
			// 	default: ''
			// },
			colorStyle: {
				type: String,
			},
			showDelete: {
				type: String,
			}
		},
		ready: function() {
			if (this.showDelete == 'false') {
				this.delStatus = false
			} else {
				this.delStatus = true
			}
		},
		data() {
			return {
				keyboardValue: '',
				keyboardAlph: ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'],
				delStatus: true,
				isNum: false,
				isUpperCase: false,
				keyboardNumber: '1234567890-/:;()$&@".,?!\'',
				letter_info: {},
				letterBoxWidth: 0,
				letterBoxHeight: 0,
			}
		},
		mounted() {
			const that = this

			uni.getSystemInfo({
				success: function(info) {
					// console.log('屏幕宽度：' + info.windowWidth);
					// console.log('屏幕高度：' + info.windowHeight);
					// console.log('屏幕宽高比：' + info.pixelRatio);
					that.letterBoxWidth = (info.windowWidth - 36) / 10;
					that.letterBoxHeight = (235 - 100) / 3;
				}
			});


			that.letter_info = uni.getStorageSync('letter_info');
			console.log('letter_info============')
			console.log(that.letter_info)
			if ('创建一个音频对象') {
				that.audioContext = uni.createInnerAudioContext();
				that.audioContext.src = '/static/mp3/keydown.mp3';
				that.audioContext.volume = 0.9;
				// 监听音频开始播放事件
				that.audioContext.onPlay(() => {
					// this.$emit('playStates', {
					// 	'playType': 'play'
					// });
				});
				// 监听音频播放完毕事件
				that.audioContext.onEnded(() => {
					// this.$emit('playStates', {
					// 	'playType': 'end'
					// });
				});
			}
		},
		methods: {
			// tapKeyboardStr () {
			// 	var data = {e: {
			// 		target: {
			// 		dataset: {
			// 			val: this.currentKey
			// 		}	
			// 		}
			// 	}}
			// 	this.tapKeyboard(data);
			// }
			/**
			 * 点击键盘按键事件
			 */
			tapKeyboard: function(e) {
				var tapVal = e.target.dataset.val;
				var keyboardValue = this.keyboardValue;
				var length = keyboardValue.length;
				if (tapVal === 'del') {
					//点击删除
					if (length > 0) {
						keyboardValue = keyboardValue.substring(0, length - 1);
					}
					this.keyboardValue = keyboardValue;
					this.$emit('input', {
						'keyboardValue': keyboardValue,
						'target': tapVal
					});
					return false;
				} else {
					keyboardValue = (keyboardValue + tapVal);
					this.keyboardValue = keyboardValue;
					this.$emit('input', {
						'keyboardValue': keyboardValue,
						'target': tapVal
					});
					var that = this;
					if (that.audioContext) {
						that.audioContext.stop();
						setTimeout(function() {
							// that.audioContext.src = `/static/mp3/letter26/${tapVal.toUpperCase()}.mp3`;
							that.audioContext.src = `/static/mp3/keydown.mp3`;
							that.audioContext.play();
						}, 10);
					}
				}
				return false;
			},
			onShift() {
				const keyboardLowerCaseAlph = 'qwertyuiopasdfghjklzxcvbnm';
				const keyboardUpperCaseAlph = 'QWERTYUIOPASDFGHJKLZXCVBNM';
				const isUpperCase = this.data.isUpperCase;
				let keyboardAlph;
				if (isUpperCase) {
					keyboardAlph = keyboardLowerCaseAlph;
				} else {
					keyboardAlph = keyboardUpperCaseAlph;
				}
				this.keyboardAlph = keyboardAlph;
				this.isUpperCase = !isUpperCase;
			},
			onDone() {
				this.$emit('done');
			},
			emptyInput() {
				this.keyboardValue = '';
			},
			onTrans() {
				const isNum = this.data.isNum;
				this.isNum = !isNum;
			},
			/**
			 * 组织键盘点击事件冒泡到父容器
			 */
			stopProp: function() {
				return false;
			}
		}
	}
</script>

<style lang="less">
	.keyboard {
		z-index: 9;
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		display: -webkit-flex;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}

	.td {
		// font-family: HelveticaNeue, HelveticaNeue-Regular, HelveticaNeue-Light;
		// text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		width: 74rpx;
		height: 74rpx;
		// line-height: 30px;
		background: linear-gradient(to bottom, #130e00, #373632);
		border: 3px solid #373632;
		margin: 10rpx 1rpx;
		color: #fff;
		border-radius: 10px;
		box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.35);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.td_num {
		width: 70rpx;
	}

	.td_space {
		width: 300rpx;
	}

	.icon-space {
		width: 30rpx;
		height: 30rpx;
	}

	.td_mid {
		width: 96rpx;
	}

	.td_nor {
		width: 74rpx;
		margin: 10rpx 4rpx;
	}

	.td_big_right {
		margin-right: 45rpx;
	}

	.td_big_left {
		margin-left: 45rpx;
	}

	.td_spec_fin {
		width: 23%;
		justify-self: flex-end;
		background-color: #09f;
		color: #fff;
	}

	.icon-shift,
	.icon-shift-on {
		width: 28px;
		height: 15px;
		position: relative;
		top: 2rpx;
	}

	.icon-del,
	.icon-del-hover {
		width: 40rpx;
		height: 30rpx;
		position: relative;
		top: 2rpx;
	}

	.td_spec_shift,

	.td_spec_del {
		position: absolute;
		width: 74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
		background-color: #000;
	}

	.td_spec_bar {
		position: absolute;
		width: 74rpx;
		background-color: #000;
	}

	.td_spec_shift {
		left: 30rpx;
	}

	.td_spec_del {
		right: 30rpx;
	}

	.icon-del,
	.icon-del-hover {
		width: 40rpx;
		height: 30rpx;
		position: relative;
		top: 2rpx;
	}

	/* 删除hover */
	.icon-del-hover {
		display: none;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
	}

	.td_spec_del.board_bg_spec .icon-del {
		display: none;
	}

	.td_spec_del.board_bg_spec .icon-del-hover {
		display: inline-block;
	}

	.board_bg_spec {
		background: #fdd544;
	}

	.icon-shift-on {
		display: none;
	}

	.td_spec_shift.on .icon-shift {
		display: none;
	}

	.td_spec_shift.on .icon-shift-on {
		display: inline-block;
	}

	.submit {
		width: 250px;
		border-radius: 20px;
		overflow: hidden;
		background: linear-gradient(to bottom, #130e00, #373632);
		color: #fff;
		font-size: 18px;
		font-family: hzgb;
	}

	.board_bg {
		box-shadow: 0 0 0 #e5e5e5;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		color: #fff;
	}

	.orange {
		background: #fd9571;
	}
</style>